<template>
  <div class="order-list">
    <tab>
      <tab-item v-for="(item,index) in nav_item" :key="index" :selected='item.selected' @click.native='choose_tab(item)'>{{ item.name }}</tab-item>
    </tab>
    <div class="order_list">
      <p class="null_ts" v-if="order_list==''">空空如也~</p>
      <div class="list_item" v-for="item in order_list" @click="link_detial(item)">
        <div class="imgbox">
          <img :src="item.avatar" alt="" style="width:100%">
        </div>
        <div class="desc">
          <p class="shop_name">{{ item.name }}}</p>
          <p>创建时间：{{ item.createTime }}</p>
          <p>总价：{{ item.goodsMoney / 100 }}</p>
        </div>
        <span class="state">{{item.orderStatus|change_order_state}}</span>
        <div class="btn_box">
          <input type="button" class="btn" value="付款" v-if="item.orderStatus==0">
          <input type="button" @click.stop="qx_order(item)" class="btn" value="取消订单" v-if="item.orderStatus==1">
          <input type="button" class="btn" @click.stop="confirm_receipt(item)" value="确认收货" v-if="item.orderStatus==2">
          <input type="button" class="btn" value="去评价" v-if="item.orderStatus==3">
          <input type="button" class="btn" value="申请退款" v-if="item.orderStatus==4">
        </div>
      </div>
    </div>
    <confirm v-model="qr_dialog" title="提示" @on-confirm="qx_order_func()">
      <p style="text-align:center;">{{ dialog.dialog_msg }}</p>
    </confirm>
  </div>
</template>
<script>
import { Tab, TabItem, Confirm } from "vux"
import g from "../../common/js/http.js"
export default {
  components: {
    Tab,
    TabItem,
    Confirm
  },
  data() {
    return {
      qr_dialog: false,
      order_info: "",
      order_list: [],
      order_state: "",
      dialog: {
        dialog_msg: "",
        dialog_url: ""
      },
      nav_item: [
        {
          name: "全部订单",
          selected: true,
          state: 5
        },
        {
          name: "待支付",
          selected: false,
          state: 0
        },
        {
          name: "待发货",
          selected: false,
          state: 1
        },
        {
          name: "待收货",
          selected: false,
          state: 2
        },
        {
          name: "已完成",
          selected: false,
          state: 3
        },
        {
          name: "退款售后",
          selected: false,
          state: 4
        }
      ]
    }
  },
  filters: {
    change_order_state(val){
      if(val=='0'){
        return '待支付'
      }else if(val=='1'){
        return '待收货'
      }else if(val=='2'){
        return '待发货'
      }else if(val=='3'){
        return '已完成'
      }else if(val=='4'){
        return '退款/售后'
      }
    }
  },
  watch: {
    $route(to, from) {
      this.getOrderState()
    }
  },
  created() {
    this.getOrderState()
    this.order_state = this.$store.state.order_state
  },
  methods: {
    qx_order_func(item) {
      var _this = this
      var item = this.order_info
      g.post_func(_this.dialog.dialog_url, { orderNo: item.orderNo }, function(
        data
      ) {
        if (data.code == "401") {
          alert("登录过期 请重新登录")
          _this.$router.push("/login")
        } else if (data.code == "200") {
          alert("操作成功！")
          _this.getData(_this.order_state)
        } else {
          alert("网络错误，请稍后重试")
        }
        console.log(data)
      })
    },
    getOrderState() {
      var orderState = this.$store.state.order_state
      this.getData(orderState)
      this.nav_item.forEach(item => {
        if (item.state == orderState) {
          item.selected = true
        } else {
          item.selected = false
        }
      })
    },
    getData(state) {
      var _this = this
      var staff_id = localStorage.getItem('user')
      if(staff_id == ''){
        alert('登录过期，请登录')
        _this.$router.push('/login')
        return;
      }
      g.post_func("/api/v1/staff/order_list", { order_state: state,staff_id: staff_id}, function(
        data
      ) {
        if (data.code == "401") {
          alert("登录过期 请重新登录")
          _this.$router.push("/login")
        } else if (data.code == "200") {
          console.log(data)
          _this.order_list = data.data
        } else {
          alert("网络错误，请稍后重试")
        }
      })
    },
    choose_tab(item) {
      this.getData(item.state)
      this.order_state = item.state
      this.$store.state.order_state = item.state
      console.log(item)
    },
    qx_order(item) {
      this.qr_dialog = true
      this.order_info = item
      this.dialog.dialog_msg = "取消不可恢复！确定取消订单吗？"
      this.dialog.dialog_url = "/api/v1/staff/qx_order"
    },
    confirm_receipt(item) {
      console.log(this.order_state)
      this.qr_dialog = true
      this.order_info = item
      this.dialog.dialog_msg = "你将确认收货，是否执行此操作？"
      this.dialog.dialog_url = "/api/v1/staff/confirm_receipt"
    },
    link_detial(item){
      this.$store.state.orderNo = item.orderNo
      this.$router.push('/order_detail')
      console.log(this.$store.state.orderNo)
    }
  }
}
</script>
<style scoped>
.null_ts {
  text-align: center;
  margin-top: 20%;
}
.order_list .list_item {
  position: relative;
  height: 100px;
  margin: 10px 0;
  font-size: 96%;
  box-shadow: 1px 1px 1px #edf1f2;
  background: #fff;
}
.order_list .list_item .imgbox {
  position: absolute;
  left: 12px;
  width: 80px;
  height: 80px;
  overflow: hidden;
}
.order_list .list_item .desc {
  position: absolute;
  left: 105px;
  color: #858585;
}
.order_list .list_item .desc p {
  margin: 10px 0;
  font-size: 96%;
}
.order_list .list_item .state {
  position: absolute;
  top: 10px;
  right: 10px;
}
.order_list .list_item .btn_box {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.order_list .list_item .btn_box .btn {
  padding: 5px 10px;
  background: none;
  color: #04be02;
  border: 1px solid #04be02;
}

.shop_name {
  font-weight: 600;
  color: #333;
}

</style>
